<template>
	<section class="todoapp">


	<Hearder :arr="list"
						@enter="enterFn"
	></Hearder>
	

		<Main	:arr="getList"
					@del="delFn"
		></Main>


		<Foooter	:arr="list"
							@on="onFn"
							@state="stateFn"
		></Foooter>

	</section>
</template>

<script>
	// 样式引入 + 导入组件并注册使用
import Hearder from './components/TodoHeader.vue'
import Main from './components/TodoMain.vue'
import Foooter from './components/TodoFooter.vue'

import './styles/base.css'
import './styles/index.css'

	export default {

		components: {
			Hearder,
			Main,
			Foooter
		},

		data() {
			return {
				list: JSON.parse(localStorage.getItem("todos4")) || [] ,
				process: ""
			};
		},
		methods: {

				delFn(id){
				console.log(id);
				this.list = this.list.filter(item => item.id !== id)
			},

			enterFn(name){
				this.list.unshift({
					id: parseInt(Math.random()*999+1),
					name,
					isDone: false
				})
			},

			onFn(){
				this.list = this.list.filter(item => item.isDone !== true)
			},
			stateFn(process){
				console.log(process);
					this.process = process
			},
		},

		computed: {
			 getList(){
					if(this.process === 'active') {
						return this.list.filter(item => item.isDone !== true)
					}else if(this.process === 'completed'){
						return this.list.filter(item => item.isDone === true)
					} else {
						 return  this.list
					}
			 } 
		},
		watch: {
			list: {
				deep: true,
				handler(){
					localStorage.setItem("todos4", JSON.stringify(this.list))
				}
			}
		}

		
	};
</script>
